﻿<style type="text/css">

* { margin: 0; padding: 0; }

html { height: 100%; font-size: 62.5% }

@*body { height: 100%; background-color: #FFFFFF; font: 1.2em Verdana, Arial, Helvetica, sans-serif; }*@


/* ==================== Form style sheet ==================== */

.form_user { margin: 25px 0 0 29px; padding-bottom: 30px }
form * { vertical-align: middle; }

fieldset { margin: 0 0 22px 0; border: 0; }
legend { font-size: 1.2em; color: #2E6600; font-weight: bold; }

label { float: left; display: block; width: 100px; margin-top: 4px; clear: left; }
label.choose { width: 162px; }
label.spam-protection { display: inline; width: auto; }

input.text, textarea, input.choose, input.answer { border: 1px solid #909090; padding: 3px; }
input.text { width: 300px; margin: 0 0 8px 0; float: left;}
textarea { width: 400px; margin: 0 0 12px 0; display: block; }

select { width: 250px; border: 1px solid #909090; padding: 2px;  margin: 0 0 8px 0; }

input.choose { margin: 0; }
input.answer { width: 40px; margin: 0 0 0 10px; }
input.submit-text { font: 1.4em Georgia, "Times New Roman", Times, serif; letter-spacing: 1px; display: block; margin: 23px 0 0 0; float: left}

hr.formik { height: 1px; color: gray; background-color: gray; border: 0 solid gray; margin: 3px 0 20px 0; }
form br { display: none; }

input.choose {
    margin: 0 2px 0 0;
}
input.inp-text, textarea, input.choose, input.answer {
    border: 1px solid #909090;
    padding: 3px;
}
/* ==================== Form style sheet END ==================== */

</style>

<div style="overflow: hidden">
	<h1 style="text-align: center">Quyền Quản Trị</h1>
	<form action="" method="post" style="margin-top: 50px" data-bind="foreach: users" class="form_user">
		<div style="overflow: hidden">
					<legend data-bind="text: LogName"></legend>
		<hr class="formik" />
		<label for="input-one"><strong>ID:</strong></label><br />
		<input name="input-one-name" type="text" size="20" id="input-one" class="text"  data-bind="value: UserID"/><br />
		<label for="input-one"><strong>Email:</strong></label><br />
		<input name="input-one-name" type="text" size="20" id="input-one" class="text"  data-bind="value: Email"/><br />
		<label for="input-one"><strong>Họ Tên:</strong></label><br />
		<input name="input-one-name" type="text" size="20" id="input-one" class="text"  data-bind="value: Name"/><br />
		<label  style="width: 300px; margin-left: 100px;">
			<input id="option1" class="choose" type="checkbox" value="1" name="option[]" data-bind="checked: IsEmployee">
			Seller
		</label>
		<label  style="width: 300px; margin-left: 100px;">
			<input id="option2" class="choose" type="checkbox" value="1" name="option[]" data-bind="checked: IsAccessToAdmin">
			Admin
		</label>
		<label  style="width: 300px; margin-left: 100px;">
			<input id="option3" class="choose" type="checkbox" value="1" name="option[]" data-bind="checked: IsBlocked">
			Khóa
		</label>
		<p><input type="button" alt="SUBMIT" name="Submit" value="Lưu" class="submit-text" data-bind="click: $root.EditUser"/></p>
		<br>
		<br>
			<br>

		</div>
	</form>
</div>



<script src="../../Scripts/knockout-3.0.0.js" type="text/javascript"></script>
<script src="../../Scripts/message.js" type="text/javascript"></script>
<link href="../../Content/themes/message_default.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/Models/User.js" type="text/javascript"></script>
<script type="text/javascript">
	function UserListViewModel() {
		// Data
		var self = this;
		self.users = ko.observableArray();
		// Load initial state from server, convert it to Task instances, then populate self.tasks
		$.getJSON("/api/user/GetUsers", function (allData) {
			var mappedUsers = $.map(allData, function (item) { return new User(item) ;});
			self.users(mappedUsers);
		});

		self.EditUser = function(user) {
			var json = ko.toJSON(user);
			$.ajax({
				url: '/api/user/PutUser',
				type: 'PUT',
				contentType: "application/json; charset=utf-8",
				context: user,
				data: json,
				success: function(results, status) {
					if (status == "success") {
						dhtmlx.alert({
							title: "Lưu thành công: " + results.LogName,
							text: "Thành công!",
							ok: "OK"
						});
					}
				},
				error: function(results, status) {
					dhtmlx.alert({
						type: "alert-error",
						title: "Cập nhật thất bại : ",
						text: "Thất bại!",
						ok: "OK"
					});
				}
			});

		};
	}

	ko.applyBindings(new UserListViewModel());
</script>